<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/Me.css">
  <link rel="stylesheet" href="./css/iconfont.css">
  <link rel="stylesheet" href="./css/game-list.css">
</head>

<body>

  <header>
    <div class="header-one">
      <div class="logo"><img src="./images/logo.png" alt=""></div>

      <nav>
        <ul>
          <li>
            <a href="index.html">
              <span>首页</span><br>
              <span>home</span>
            </a>
          </li>
          <li>
            <a href="game-list.html">
              <span>游戏</span><br>
              <span>game</span>
            </a>
          </li>
          <li>
            <span>案例</span><br>
            <span>Case</span>
          </li>
          <li>
            <a href="Me.html">
              <span>关于我们</span><br>
              <span>About Us</span>
            </a>
          </li>
          <li>
            <i class="iconfont icon-linedesign-05"></i>
          </li>
        </ul>


      </nav>



    </div>
    <div class="header-two">
      <div class="introduce">
        <span>首页</span>
        <span><i class="iconfont icon-x_jiantouyou"></i> </span>
        <span>个人中心</span>
      </div>
    </div>
  </header>

  <section class="bg">

    <div class="bg-one">
      <div class="y-line"></div>
      <div class="title">宝石迷阵</div>
      <p>《宝石迷阵》与暴司时候发行的游的的戏《星际争霸》一样，是一款成功的即时战略游戏。
        游戏时战略游戏所要素：建设基地和指挥指挥战斗。游戏的操作方式也，秉承了星霸优点，
        并对星际争霸中一些繁琐的操作进行了简化。</p>


      <button>收藏</button>
      <button>制作游戏</button>
      <button>购买</button>

    </div>




    <div class="bg-two">
      <div class="img-phone">
        <img src="./images/phone1.png" alt="">
        <img src="./images/YOUR SCREEN HERE.png" alt="">
        <img src="./images/iphone.png" alt="">
      </div>


      <div class="introduce">
        <div class="num">
          <div class="circle">
            <img src="./images/timer.png" alt="">
          </div>
          <span>时间</span>
          <span>2014-07-09</span>
        </div>

        <div class="num">
          <div class="circle">
            <img src="./images/￥.png" alt="">
          </div>
          <span>价格</span>
          <span>2333</span>
        </div>

        <div class="num">
          <div class="circle">
            <img src="./images/star1.png" alt="">
          </div>
          <span>使用次数</span>
          <span>20</span>
        </div>

        <div class="num">
          <div class="circle">
            <img src="./images/folder.png" alt="">
          </div>
          <span>大小</span>
          <span>1034KB</span>
        </div>
      </div>

    </div>










    <div class="bg-three">

      <div class="y-line"></div>
      <div class="title">使用方法</div>
      <p>use Methods</p>


      <div class="use">
        <div class="use-num">
          <img src="./images/use_1.png" alt="">
          <img src="./images/use_1.1.png" alt="">
          <img src="./images/use_1.2.png" alt="">
          <img src="./images/use-1.3.png" alt="">
          <img src="./images/use_1.4.png" alt="">
          <img src="./images/use_1.5.png" alt="">

          <p>step one</p>
          <p>选择一个游戏，换图</p>
        </div>


        <div class="img-arrow">
          <img src="./images/r_arrow.png" alt="">
          <img src="./images/r_arrow2.png" alt="">
        </div>

        <div class="use-num">
          <img src="./images/use_1.png" alt="">
          <img src="./images/use_1.1.png" alt="">
          <img src="./images/use_1.2.png" alt="">
          <img src="./images/use-1.3.png" alt="">
          <img src="./images/use_1.4.png" alt="">
          <img src="./images/use_1.5.png" alt="">

          <p>step one</p>
          <p>选择一个游戏，换图</p>
        </div>

        <div class="img-arrow">
          <img src="./images/r_arrow.png" alt="">
          <img src="./images/r_arrow2.png" alt="">
        </div>

        <div class="use-num">
          <img src="./images/use_1.png" alt="">
          <img src="./images/use_1.1.png" alt="">
          <img src="./images/use_1.2.png" alt="">
          <img src="./images/use-1.3.png" alt="">
          <img src="./images/use_1.4.png" alt="">
          <img src="./images/use_1.5.png" alt="">

          <p>step one</p>
          <p>选择一个游戏，换图</p>
        </div>






      </div>











    </div>




  </section>

  <footer>
    <div class="footer-img1">
      <img src="./images/footer-one.png" alt="">
    </div>
    <p>Copyright © 2014 Pangtang. All Rights Reserved. 版权所有</p>

    <div class="footer-img2">
      <img src="./images/footer-towo.png" alt="">
    </div>
  </footer>


</body>

</html>